<template>
	<div class="content-header">
		<el-row style="padding: 0 5px 0 5px;">
			<el-card class="box-card mian-card-header">
				<el-page-header @back="backHome" icon="el-icon-arrow-left" content="资源中心" title="返回主页" />
			</el-card>
		</el-row>
		
		<el-scrollbar>
		
		
		<el-row>
				<el-row v-loading='list_loading_resource' element-loading-text="拼命加载资源中"
						element-loading-background="rgba(255, 255, 255, 1)" style="margin: 0 5px 0 5px;
						width:-webkit-fill-available;">
					<div style="min-height: 9.375rem;background-color: #FFFFFF;margin: 0 25px 0 25px;" v-show="list_loading_resource">
					</div>
					<el-col :xs="{span:24}" :sm="{span:24}" :md="{span:12}" :lg="{span:8}" :xl="{span:8}"
					v-for="(cardItem, index) in cardList" :key="index">
						<el-card class="card_child re-card-list-item" shadow="hover" :body-style="{ padding: '20px'}">
					
							<template #header>
								<a target="_blank" :href="'http://localhost:3000/detail?rid='+cardItem.recommendId">
									<img width="64" height="64" :src="cardItem.icon" class="image" />
									<div>
										<span class="home_card_title"
											style="font-size: 18px;">{{cardItem.recommendName}}</span>
										<div class="bottom">
											<div class="home_card_content">
												{{cardItem.description}}
											</div>
											<!-- 标签模块 -->
											<div>
												<span v-for="tag in cardItem.tag">
													<el-tag class="tag-style" effect="plain" type="info">
														{{tag}}
													</el-tag>
												</span>
											</div>
										</div>
									</div>
								</a>
							</template>
							<el-button-group>
								<!--访问按钮 -->
								<el-tooltip class="item" effect="dark" content="直接访问" placement="top-start">
									<el-button icon="el-icon-paperclip" @click="handleLink(cardItem.link)">
									</el-button>
								</el-tooltip>
								<!-- 分享按钮 -->
								<el-tooltip class="item" effect="dark" content="分享" placement="top-start">
									<el-button icon="el-icon-share" @click="handleCpoy(cardItem.recommendId)"></el-button>
								</el-tooltip>
								<!-- 收藏按钮 -->
								<el-tooltip class="item" effect="dark" content="收藏" placement="top-start"
								v-if="cardItem.hasCollect===false">
									<el-button :data-id="cardItem.recommendId" ref="collect" icon="el-icon-star-off"
										@click="handleClick($event,cardItem.recommendId,index)">
										{{cardItem.collectNumber}}
									</el-button>
								</el-tooltip>
								<!-- 取消收藏按钮 -->
								<el-tooltip class="item" effect="dark" content="取消收藏" placement="top-start"
								v-else>
									<el-button :data-id="cardItem.collectNumber" ref="collect" icon="el-icon-star-on"
										type="warning" @click="handleClick($event,cardItem.collectNumber,index)">
										{{cardItem.collectNumber}}
									</el-button>
								</el-tooltip>
							</el-button-group>
						</el-card>
					</el-col>					
				</el-row>
				
				<!-- <el-row style="width: -webkit-fill-available;" v-show="infoStatus">
					<el-card shadow="never" class="card-page">
						<el-empty description="未搜索到相关内容" >
							<el-button type="primary" @click.native="goRecommend()">我要推荐资源</el-button>
						</el-empty>
					</el-card>
				</el-row> -->
				
				<el-row style="width: -webkit-fill-available;" v-show="pageNationView">
					<el-card shadow="never" class="re-card-page">
						<el-pagination background layout="prev, pager, next, total"
						ref="searchResultPage"
						:total="listNum" 
						:page-size="pageSize"
						:current-page="currentPage" 
						@current-change="pageChange">
						</el-pagination>
					</el-card>
				</el-row>
		</el-row>		
		</el-scrollbar>



	</div>
</template>

<script lang="ts">
	import {
		ref
	} from 'vue'

	export default {
		setup() {
			return {
				options: ref(
					[{
							value: 'Java',
							label: 'Java',
						},
						{
							value: 'Python',
							label: 'Python',
							// disabled: true,
						},
						{
							value: 'C语言',
							label: 'C语言',
						},
						{
							value: 'C++',
							label: 'C++',
						},
						{
							value: 'JavaScript',
							label: 'JavaScript',
						},
					]
				),
				value: ref([])
			}
		},
		created() {
			// setTimeout(function() { }, 5000); 
			if(this.$route.query.q !== undefined) {
				this.search_resource(this.$route.query.q,1,6);
			} else {
				this.$router.push('/resource')
			}
			
		},
		data() {
			return {
				//-1代表都不选择，改变量对应buttonGroup选中的按钮index
				activeClass: 0,
				cardName: this.$route.meta.title,
				list_loading_resource: true,
				pageNationView:false,
				infoStatus:false,
				listNum:0,
				currentPage:1,
				pageSize:6,
				cardList: [],
				buttonGroup: [{
						index: 0,
						name: '默认'
					},
					{
						index: 1,
						name: '收藏'
					},
					{
						index: 2,
						name: '浏览'
					}
				]
			}
		},
		methods: {
			changePageTotalStyle(){
				this.$nextTick(()=>{
					// console.log(this.$refs.searchResultPage.$el.children[3])
					this.$refs.searchResultPage.$el.children[3].innerHTML = '总共' + ' ' + this.listNum + ' ' + '条记录';
					this.$refs.searchResultPage.$el.children[3].style.margin ='0 10px 0 10px';
				})
			},
			pageChange(currentPage) {
				this.currentPage = currentPage;
				this.cardList = [];
				this.list_loading_resource = true;
				this.search_resource(this.$route.query.q,currentPage,6);
				
			},
			
			search_resource(qtext,r_pageNum,r_pageSize){
				let that = this;
				this.$axios({
					url: 'http://localhost:8080/findResource/getResource',
					method: 'get',
					headers: {
						'token': localStorage.pg_token
					},
					params: {
						userId:localStorage.pg_username,
						q:qtext,
						pageNum:r_pageNum,
						pageSize:r_pageSize,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if(result.code === 200) {
							that.cardList = result.data.result;
							// console.log(that.cardList)
							that.listNum = result.data.page_sum;
							if(result.data === null) {
								that.infoStatus = true;
							}
						} else{
							that.infoStatus = true;
							that.$message.warning(result.msg);
						}
						that.list_loading_resource = false;
						that.pageNationView = true;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
					// console.log(error.config);
					that.loginStatus = false;
				}).then(()=>{
					this.changePageTotalStyle();
				});
			},
			changeChecked(index) {
				this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
				// console.log(this.$route.meta.title);
			},
			backHome() {
				// console.log('back');
				this.$router.push('/Home')
			}
		},
		wathch: {
			$route: function(newVal, oldVal) {

			}
		},

	}
</script>

<style>
	a {
		text-decoration: none;
		color: #000000;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}
	
	.card_child:hover .home_card_title {
		color: #0D84FF;
		font-weight: 500;
		transition: .1s;
	}
	
	.re-card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}
	
	.re-card-list-item {
		margin: 5px;
		/* width: max-content; */
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}
	
	.bottom {
		padding: -5px;
	}
	
	.home_card_title {
		color: #000000;
	}
	
	
	.home_card_content {
		/* padding: 10px; */
		color: #999999;
		font-size: 14px;
		text-align: center;
		margin:1rem 0 1rem 0;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	
	.image {
		border-radius: 5%;
	}

	.re-card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}


	.main-card-child:hover .card_title {
		color: rgb(13, 132, 255);
		font-weight: 500;
		transition: .1s;

	}


	.main-card-child {
		margin: 10px;
		cursor: pointer;
	}

	.re-card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.card_content {
		padding: 10px;
		color: #999999;
		font-size: 14px;
		text-align: left;
	}



	.content-header {
		display: flex;
		flex-grow: 1;
		margin: 0 5px 0 5px;
		flex-direction: column;
		/* flex-wrap: wrap; */
		/* background-color: #FFF; */
	}

	.el-button:active {
		border-color: #1890ff;
		color: #1890ff;
		background-color: #ecf5ff;
	}

	.re-card-lable {
		display: flex;
		align-items: stretch;
		text-align: center;
		height: 100%;
	}

	.re-card-lable-content {
		display: flex;
		align-items: center;
		text-align: left;
		margin-bottom: 1.25rem;
		/* height: 100%; */
	}

	.grid-content {
		margin-bottom: 0.9375rem;
		border-radius: 4px;
		min-height: 30px;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.re-card-control {
		margin: 0.3125rem 0 0.3125rem 0;
		width: -webkit-fill-available;
	}

	.re-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mian-card-header {
		height: 70px;
		width: 100%;
		margin: 0;
	}

	/* .el-page-header__left{
		width: 0;
		display: none;
	} */
</style>
